<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <select name="" id="province">
        
    </select>
    <select name="" id="city">
        <option value="请选择">请选择</option>
    </select>

    <select name="" id="area">
        <option value="请选择">请选择</option>
    </select>


    <script>
        
        const oPro = document.querySelector('#province') ;
        const oCity = document.querySelector('#city') ;
        const oArea = document.querySelector('#area') ;

        // 显示所有的省份，但不会显示市
        ajax('../data/city.json' , function(d) {
            console.log(d);  // 数组
            let shengHTML = '<option value="请选择">请选择</option>' ;
            d.forEach( ({sheng}) => {
                shengHTML += `<option value="${sheng}">${sheng}</option>`
            })
            oPro.innerHTML = shengHTML ;

            // 省份发生改变的时候 ， 市也发生改变
            oPro.onchange = function() {
                const shengVal = this.value ;
                if(shengVal === '请选择') {
                    oCity.innerHTML = '<option value="请选择">请选择</option>' ;
                    oArea.innerHTML = '<option value="请选择">请选择</option>' ;
                    return ;
                }
               

                // 找到满足条件的数据
                let city = d.filter( v => v.sheng === shengVal) ;
                console.log(city);
                city = city[0].children ;
                console.log(city);
                let cityHTML = '<option value="请选择">请选择</option>' ;
                city.forEach( ({city}) => {
                    cityHTML += `<option value="${city}">${city}</option>`
                } )
                oCity.innerHTML = cityHTML ;

                
                // 市发生改变以后，区也发生改变
                oCity.onchange = function() {
                    const cityVal = this.value ;
                    if(cityVal === '请选择') {
                        oArea.innerHTML = '<option value="请选择">请选择</option>' ;
                        return ;
                    }

                    // console.log(city);  
                    // 找到满足条件的数据
                    let qu = city.filter( v => v.city === cityVal) ;
                    // console.log(qu);
                    qu = qu[0].qu ;
                    console.log(qu);
                    let quHTML = '<option value="请选择">请选择</option>' ;
                    qu.forEach( ({area}) => {
                        quHTML += `<option value="${area}">${area}</option>`
                    } )
                    oArea.innerHTML = quHTML ;
                }

            }

        })












        function ajax(url, cb) {
            const xhr = new XMLHttpRequest();
            xhr.open('get', url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = xhr.responseText;
                    // console.log(data);
                    data = JSON.parse(data);
                    // console.log(data);

                    // 数据请求成功以后想处理数据   --- 想做一件事情 --- 函数
                    cb(data);

                }
            }
        }

    </script>

</body>

</html>